<template>
  <div>
    <div class="zan-panel-title">办理 手续</div>
    <div class="zan-panel hmx-service-row">
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-lg" src="/static/images/ico_03_1.png"></image>
          <div class="zan-font-14 text-color-gary">入住申请</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-lg" src="/static/images/ico_09_1.png"></image>
          <div class="zan-font-14 text-color-gary">线上续租</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-lg" src="/static/images/ico_16_1.png"></image>
          <div class="zan-font-14 text-color-gary">线上缴费</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-lg" src="/static/images/ico_20_1.png"></image>
          <div class="zan-font-14 text-color-gary">退房申请</div>
        </div>
      </a>
    </div>
    <div class="zan-panel-title">物业 服务</div>
    <div class="zan-panel hmx-service-row">
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_18_1.png"></image>
          <div class="zan-font-14 text-color-gary">房卡挂失</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_22_1.png"></image>
          <div class="zan-font-14 text-color-gary">临时开锁</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_033_1.png"></image>
          <div class="zan-font-14 text-color-gary">报修申请</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-6 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_29_1.png"></image>
          <div class="zan-font-14 text-color-gary">手机号变更</div>
        </div>
      </a>
    </div>
    <div class="zan-panel-title">个人 信息</div>
    <div class="zan-panel hmx-service-row">
      <a href="">
        <div class="zan-col zan-col-12 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_04_1.png"></image>
          <div class="zan-font-14 text-color-gary">基本信息</div>
        </div>
      </a>
      <a href="">
        <div class="zan-col zan-col-12 hmx-main-enter">
          <image class="hmx-main-icon-md" src="/static/images/ico_08_1.png"></image>
          <div class="zan-font-14 text-color-gary">需求填写</div>
        </div>
      </a>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {};
  },

  components: {},

  methods: {},

  created() {}
};
</script>

<style scoped>
.hmx-service-row {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  background-color: #fafafa;
}

.hmx-main-icon-lg {
  width: 42px;
  height: 42px;
}

.hmx-main-icon-md {
  width: 38px;
  height: 38px;
}

.zan-panel-title::before {
  content: "|";
  color: #cf512c;
  background-color: #cf512c;
  margin-right: 10px;
}

.text-color-gary {
  color: #808080;
}
</style>
